<template>
	<view class="userinfo">
		<!-- 头像 -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">头像</text>
			<view class="userinfo__item__right u-f-ac" @tap="changeimg">
				<image :src="userInfo.userpic" mode="aspectFill"/>
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		<!-- 昵称 -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">昵称</text>
			<view class="userinfo__item__right u-f-ac">
				<input type="text" v-model="userInfo.username" class="userinfo__item__right--text" />
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		<!-- 性别 -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">性别</text>
			<view class="userinfo__item__right u-f-ac" @tap="changeOne('sex')">
				<text class="userinfo__item__right--text">{{userInfo.sex}}</text>
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		
		<!--生日  -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">生日</text>
			<view class="userinfo__item__right u-f-ac">
				<!-- 日期选择器 -->
				<picker mode="date" start="1970-1-1" :end="dayjs().format('YYYY-MM-DD')" fields="day" @change="changeBirthda" :value="userInfo.birthda">
					<text class="userinfo__item__right--text">{{userInfo.birthda}}</text>
				</picker>
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		
		<!--情感  -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">情感</text>
			<view class="userinfo__item__right u-f-ac" @tap="changeOne('qg')">
				<text class="userinfo__item__right--text">{{userInfo.qg}}</text>
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		<!--职业  -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">职业</text>
			<view class="userinfo__item__right u-f-ac" @tap="changeOne('job')">
				<text class="userinfo__item__right--text">{{userInfo.job}}</text>
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		
		
		
		<!--家乡  -->
		<view class="userinfo__item u-f-ac">
			<text class="userinfo__item--title">家乡</text>
			<view class="userinfo__item__right u-f-ac">
				<text class="userinfo__item__right--text">中国广州</text>
				  <dataPicker 
				  placeholder="请选择地址" 
				  popup-title="请选择城市" 
				  collection="opendb-city-china" 
				  field="code as value, name as text" 
				  orderby="value asc" 
				  :step-searh="true" 
				  self-field="code" 
				  parent-field="parent_code"
				 />
				<text class="icon iconfont icon-bianji userinfo__item__right--icon"></text>
			</view>
		</view>
		
		<!-- 省市区三级联选择器 -->
		
	
		<button type="default" class="user__set__btn user__set__btn--disable" @tap="submit">完成</button>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue';	
	import {onLoad} from '@dcloudio/uni-app';
	import dayjs from 'dayjs';
	import dataPicker from '../../uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue';
	import {getUserInfo} from '../../api/user.js';
	const itemList = new Map()
	
	
	const userInfo = reactive({
		userpic:'../../static/new.jpg',
		username:"昵称",
		sex:"不限",
		qg:"未知",
		job:"IT",
		birthda:"2002-2-2"
	})
	

	// 修改头像
	async function changeimg(){
		const res  = await uni.chooseImage({
			count:1,//只能选择一张
			sizeType:"changeimg",//压缩过的图片
		}).catch(e=>{
			console.log("用户取消了选择头像")
		})
		console.log(res.tempFilePaths[0])
		userInfo.userpic=res.tempFilePaths[0];
	}
	
	// 修改性别
	async function changeOne(val){
		const res = await uni.showActionSheet({
			itemList:itemList.get(val)
		})
		userInfo[val] = itemList.get(val)[res.tapIndex]
	}
	
	// 三级联动日期
	function changeBirthda(e){
		userInfo.birthda = e.detail.value
	}
	
	// 提交
	function submit(){
		
	}
	
	onLoad((e)=>{
		itemList.set("sex",['不限','男','女'])
		itemList.set("qg",['已婚','未婚','未知'])
		itemList.set("job",['IT','前端开发工程师','后端开发工程师','大数据开发工程师'])
		getUserInfo().then(res=>{
			userInfo.userpic = res.userpic;
			userInfo.username = res.username;
			userInfo.sex = res.sex;
			userInfo.qg = res.qg;
			userInfo.job = res.job;
			user.birthda = res.birthday;
		})
	})
	
</script>

<style lang="scss" scoped>
	@import '../../common/from.scss';
	.userinfo {
		padding: 20upx;
		
		&__item{
			padding: 20upx;
			justify-content: space-between;
			border-bottom: 1upx solid #eee;
			&--title{
				font-size: 36upx;
				color: #b1b1b1;
				font-weight: 600;
			}
			&__right{
				
				>image {
					width: 90upx;
					height: 90upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
				
				&--icon{
					font-size: 60upx;
					color: #b1b1b1;
				}
				
				&--text {
					color: black;
					font-size: 30upx;
					margin-right: 20upx;
					text-align: right;
				}
			}
			
		}
	}
</style>
